Skip to content

feat(page-element): option to keep the portal text size in boxes, tabs and accordions - #116

Merged
BatLeDev merged 15 commits into
masterfrom
feat-box-text-size
Sep 4, 2026
Merged

feat(page-element): option to keep the portal text size in boxes, tabs and accordions#116
BatLeDev merged 15 commits into
masterfrom
feat-box-text-size

Conversation

@BatLeDev

@BatLeDev BatLeDev commented Sep 3, 2026

Copy link
Copy Markdown
Member

Adds an option on box (card), tabs and expansion panel containers to keep the portal body text size (body-large / 16px) instead of reducing it to body-medium (14px). Also bundles dependency upgrades (Nuxt 4.5, Vuetify 4.2, Sharp 0.35, commitlint, docker actions).

What changed:

  • api/types/page-element-layout/schema.js:
    • Add keepTextSize boolean option to card, tabs, and expansion panels.
    • Relabel border option from "Bordure" to "Afficher une bordure" on card and tabs.
  • portal/app/components/page-element/layout/:
    • page-element-card.vue & page-element-tabs.vue: apply text-body-large when element.keepTextSize is enabled.
    • page-element-expansion-panels.vue: wrap panel content in text-body-large if keepTextSize, falling back to text-body-medium by default to align with cards and tabs.
  • tests/features/portal-rendering/box-text-size.e2e.spec.ts:
    • E2E test verifying container text sizes with and without keepTextSize (14px vs 16px).
  • Dependencies & Build:
    • Upgrade Nuxt to 4.5.2, Vuetify to 4.2.0, Sharp to 0.35.0, commitlint, and docker actions.
    • Adapt Vuetify 4.2 rules (fromLabs: false, alias vuetify/rules -> vuetify) and prefix useLayout to prevent conflict with Nuxt 4.5's built-in useLayout.
    • Nuxt-security console/debugger removal through Rolldown minify config for Vite 8 compatibility.
    • Regenerate Vuetify patch for 4.2.0 (drop VSelect native label fix now upstreamed).
    • Use import.meta.dirname in UI vite.config.ts.

Why:

Vuetify's v-card-text sets its content to body-medium (14px), Material Design's size for supporting text in cards. Boxes and tabs use it as their container, making text blocks inside them noticeably smaller than regular page text (16px). Accordions did not have this reduction, creating inconsistent text sizes between different layout containers.

Regression risks:

  • Accordion default text size: Expansion panels previously inherited the page font size (16px). Their default is now explicitly text-body-medium (14px) when keepTextSize is false, matching cards and tabs. Existing portals using accordions will see their accordion body text reduced unless keepTextSize is toggled on.
  • Nuxt 4.5 & Vuetify 4.2 upgrade: useLayout auto-import from Vuetify is now prefixed to avoid colliding with Nuxt 4.5's native useLayout.

…s and accordions

Vuetify's v-card-text renders its content in body-medium (14px), the Material
Design size for the supporting text of a card. Boxes and tabs use it as their
content container, so a text block placed inside them comes out smaller than the
same block on the page (16px): visible on the applications page of the docs
portal, where every paragraph lives in a box.

Each of the three containers gets a "Conserver la taille de texte du portail"
checkbox that switches its content to body-large, the portal body size. It is
off by default, so existing portals keep their rendering.

Accordions had no rule of their own: Vuetify leaves their text at the page size,
Material Design having no such component. Their content is now reduced to
body-medium by default too, so the three containers behave alike and the option
means the same thing everywhere.

The border option of boxes and tabs is relabelled "Afficher une bordure".

The test renders each container with and without the option and checks the
computed size of the text inside, 14px then 16px.
- rules moved from labs to the vuetify core entry, adapt the imports and
  the module options (fromLabs + alias, cf vuetifyjs/nuxt-module#390)
- prefix vuetify useLayout, nuxt 4.5 ships its own (vuetifyjs/nuxt-module#384)
- drop console/debugger through rolldown, nuxt-security still uses the
  esbuild option that vite 8 ignores (Baroshem/nuxt-security#737)
- regenerate the vuetify patch, 4.2 fixes the native select option labels
__dirname is unsupported by the native config loader that vite plans to
make the default.
The 21.2.2 upgrade added @commitlint/cli as a direct dependency, next to
commitlint which is only an alias package depending on it and re-exporting its
bin. Both provide a commitlint bin, and npm links the one from @commitlint/cli,
so the alias earned nothing.

The commit-msg hook runs "npx --no-install commitlint": it still resolves after
the removal, checked on a valid scope and on one outside scope-enum.
…ecurity

nuxt-security's removeLoggers goes through vite.esbuild.drop, which Vite 8
ignores in favour of oxc: it warned at every build and left the console calls in
the client bundle. The nuxt 4.5 upgrade moved the job to the rolldown minify
options of the client build, so the module option is now off and nothing injects
the ignored esbuild.drop any more.

cf Baroshem/nuxt-security#737
The note on the un-patched role="combobox" points at the two lines where
VTextField applies its role prop; they moved with the vuetify 4.2.0 bump.
…e styles

portal/package.json asked for ^1.0.0-beta.2, so regenerating the lockfile for the
nuxt 4.5 upgrade silently moved the module from 1.0.0-beta.4 to 1.0.0-rc.5. The
portal build went from 79 seconds to over 74 minutes and the docker image job had
to be cancelled, twice, which is what keeps the branch from being merged.

beta.4 compiles every Vuetify stylesheet against styles.configFile once, into a
disk cache keyed on the vuetify and vite versions plus the contents of the
settings file, and logs "Compiling Vuetify styles..." while it does it: 19s of
module setup on master, after which vuetify:styles resolveId averages 5ms over
its 10277 calls. beta.5 dropped that in favour of @vuetify/unplugin-styles, and
on this toolchain the styles end up recompiled instead of cached.

Pinning exactly, without a range, is what vuetify itself already does here: a
caret on a prerelease is free to cross a rewrite like this one again.
@BatLeDev
BatLeDev merged commit 61d9c03 into master Sep 4, 2026
3 checks passed
@BatLeDev
BatLeDev deleted the feat-box-text-size branch September 4, 2026 13:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant